<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="wrap">
        <h2>层级关系</h2>
        <div class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
            <!-- <li>07</li> -->
        </div>
    </div>
</body>
<script>
    // 层级关系
    // 父节点  
    // 子节点/子元素
    // 同胞节点

    var list = document.getElementsByClassName("list")[0];
    var first = document.getElementsByClassName("first")[0];
    var mid = document.getElementsByClassName("mid")[0];
    var last = document.getElementsByClassName("last")[0];
    console.log(list);

    // 子节点/子元素
    // Element.childNodes   子节点(文本节点,元素节点,注释节点)
    // Element.children     子元素(元素节点)

    var childNodes = list.childNodes;
    console.log(childNodes);

    var children = list.children;
    console.log(children);

    // 第一个子节点/第一个子元素
    // Element.firstChild                 第一个子节点
    // Element.firstElementChild          第一个子元素
    // console.log(list.firstChild);          // childNodes[0]
    // console.log(list.firstElementChild);   //  children[0]


    // 最后一个子节点/最后一个子元素
    // Element.lastChild                 最后一个子节点
    // Element.lastElementChild          最后一个子元素
    // console.log(list.lastChild);         // childNodes[childNodes.length-1]
    // console.log(list.lastElementChild);  // children[childNodes.length-1]


    // 父节点/父元素    => 父节点 === 父元素
    // Element.parentNode        父节点
    // Element.parentElement     父元素

    // console.log(list.parentNode);
    // console.log(list.parentElement);

    // 同胞节点/同级元素

    // previous 先前的 早先 在...之前
    // Sibling  同胞 兄弟姐妹

    // 前一个同胞节点 / 前一个同级元素
    // Element.previousSibling         前一个同胞节点
    // Element.previousElementSibling  前一个同级元素
    // console.log(mid.previousSibling);
    // console.log(mid.previousElementSibling);

    // 后一个同胞节点 / 后一个同级元素
    // Element.nextSibling         后一个同胞节点
    // Element.nextElementSibling  后一个同级元素
    // console.log(mid.nextSibling);
    // console.log(mid.nextElementSibling);
</script>

</html>